<template>
  <div class="template-content">
    <SearchHeader v-model="queryParam.where.keyword" :can-add="canModify" @handleSearch="getData" @handleAdd="add" @handleInit="queryParam.init">
      <Row :gutter="4">
        <Col span="4"><Input :placeholder="$t('code')" v-model="queryParam.where.code"></Input> </Col>
        <Col span="4"><Input :placeholder="$t('name')" v-model="queryParam.where.name"></Input> </Col>

        <Col span="4"><OrganizationTree v-model="queryParam.where.orgId" ref="srhOrgSelect" width="200px"></OrganizationTree> </Col>
        <Col span="4"><GbServerSelect ref="srhGbServerSelect" v-model="queryParam.where.gbServerId" width="200px"/></Col>

        <Col span="4">
          <Select :placeholder="$t('status')" v-model="queryParam.where.state">
            <Option value=null>{{ $t('all') }}</Option>
            <Option value="1">{{ $t('device_status_1') }}</Option>
            <Option value="2">{{ $t('device_status_2') }}</Option>
            <Option value="3">{{ $t('device_status_3') }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Select :placeholder="$t('online')" v-model="queryParam.where.online">
            <Option value=null>{{$t('all')}}</Option>
            <Option value="true">{{$t('online')}}</Option>
            <Option value="false">{{$t('offline')}}</Option>
          </Select>
        </Col>
      </Row>
    </SearchHeader>
    <Card>
      <Table border :columns="columns" :data="table.tableDatas" @on-row-click="table.rowClick" :loading="tableLoading">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" :Title="$t('browse')" icon="md-list-box" style="margin-right: 5px" @click="view(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('edit')" icon="md-create" style="margin-right: 5px" @click="edit(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('delete')" icon="md-trash" @click="remove(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="state">
          <span v-if="row.state==1" style="color: green" >{{ $t('device_status_1') }}</span>
          <span v-if="row.state==2" style="color: #ed4014" >{{ $t('device_status_2') }}</span>
          <span v-if="row.state==3" style="color: #BB5E26" >{{ $t('device_status_3') }}</span>

          <!--              <Button type="default" size="small" v-if="row.state==1">正常</Button>
                        <Button type="error" size="small" v-if="row.state==2">报废</Button>
                        <Button type="default" size="small" v-if="row.state==3">维修</Button>-->
        </template>
        <!--            <template slot-scope="{ row, index }" slot="online">
                      <Button type="success" size="small" v-if="row.online">在线</Button>
                      <Button type="default" size="small" v-if="!row.online">离线</Button>
                    </template>-->
        <template slot-scope="{ row, index }" slot="online">
          <span v-if="row.online" style="color: green" >{{ $t('online') }}</span>
          <span v-if="!row.online" style="color: red">{{ $t('offline') }}</span>
        </template>
      </Table>
      <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
    </Card>
    <DeviceXeomasEdit ref="dreviceXeomasEdit"></DeviceXeomasEdit>
<!--    <DXChannel :device="device"></DXChannel>-->
  </div>
</template>
<script>
import DevicePlayer from "@/view/Player/DevicePlayer";
import TopnavPage from "_c/topnav/TopnavPage";
import SearchHeader from "@/view/Common/SearchHeader";
import OrganizationTree from '@/components/topnav/OrganizationTree';
import GbServerSelect from '@/components/topnav/GbServerSelect.vue';
import DXChannel from '@/view/Device/DXChannel';
import DeviceXeomasEdit from '@/view/Device/DeviceXeomasEdit.vue';
import {apiResult, clone} from '@/libs/util'

import Device from "@/api/Device";
import AuthCheck from "@/api/AuthCheck";
export default {
  name: 'DeviceXeomas',
  components: {OrganizationTree, GbServerSelect, DevicePlayer, TopnavPage, SearchHeader,DXChannel,DeviceXeomasEdit},
  computed:{
    columns(){
      return[{
        title: this.$t('detail'),
        type: 'expand',
        width: 100,
        render: (h, params) => {
          //console.log(params.row);
          return h(DXChannel, { //自定义组件 DXChannel 不加引号
            props: {
              'value': params.row //子组件传值
            }
          })
        }
      },
        {title: this.$t('operate'), key: 'action', width: 150, slot: 'action', align: 'center'},
        {title: this.$t('code'), key: 'code', sortable: true, width: 200},
        {title: this.$t('name'), key: 'name', sortable: true, width: 200},
        {title: this.$t('video_channel'), key: 'defaultChannel', sortable: true, ellipsis:true,width: 200},
        {title: this.$t('alarm_channel'), key: 'defaultAlarmChannel', sortable: true, ellipsis:true,width: 200},
        {title: this.$t('online'), key: 'online', sortable: true, width: 100, slot: 'online'},
        {title: this.$t('organization'), key: 'orgName', sortable: true, width: 150},
        {title: this.$t('gb_server'), key: 'gbServerName', sortable: true, ellipsis:true,width: 200},
        {title: this.$t('status'), key: 'state', sortable: true, width: 100, slot: 'state'}]
    }
  },
  data(){
    return{
      canModify: false,
      api: new Device(),
      tableLoading:false,
      queryParam:{
        page: {
          desc: ['create_time'],
          pages: 1,
          size: 10,
          total: 0,
          current: 1,
        },
        where: {keyword:null,code: null, name: null, cate: 3, orgId: null, gbServerId: null,state:null,online:null},
        init:()=>{
          this.queryParam.where.keyword=null;
          this.queryParam.where.code=null;
          this.queryParam.where.name=null;
          this.queryParam.where.cate=3;
          this.queryParam.where.orgId=null;
          this.queryParam.where.gbServerId=null;
          this.queryParam.where.state=null;
          this.queryParam.where.online=null;
        }
      },
      table:{
        tableDatas:[],
        /*表格列表*/

        rowClick: (row,index)=>{},
        view(row) {},
      },

    }
  },
  methods:{
    getData(){
      /** 摸拟第一行点击 */
      this.api.queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.table.tableDatas = null;
          apiResult(res.data,false,result=>{
            this.queryParam.page.total = result.data.total;
            this.table.tableDatas = result.data.records;
            // 摸拟第一行点击
            //this.table.rowClick(row,0);
          });
      })
    },
    add() {
      this.$refs.dreviceXeomasEdit.openDialog("ADD",null, this.getData);
    },
    edit(row) {
      this.$refs.dreviceXeomasEdit.openDialog("EDIT",clone(row), this.getData);
    },
    view(row) {
      this.$refs.dreviceXeomasEdit.openDialog("VIEW",clone(row), this.getData);
    },

    changePage: (page)=> {
      this.getData();
    },
  },
  mounted() {
    this.canModify = new AuthCheck().gpsDevRegEdit();
    this.getData();
  }
}
</script>
<style lang="less">
  //@import "../../my-theme/template";
</style>
